Web Frontend

客户端

解析组成文件的顺序 [1]

  • 浏览器首先解析 HTML 文件,并从中识别出所有的 <link><script> 元素,获取它们指向的外部文件的链接。
  • 继续解析 HTML 文件的同时,浏览器根据外部文件的链接向服务器发送请求,获取并解析 CSS 文件和 JavaScript 脚本文件。
  • 接着浏览器会给解析后的 HTML 文件生成一个 DOM 树(在内存中),会给解析后的 CSS 文件生成一个 CSSOM 树(在内存中),并且会编译和执行解析后的 JavaScript 脚本文件。
  • 伴随着构建 DOM 树,应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件,浏览器会在屏幕上绘制出网页的界面;用户看到网页界面也就可以跟网页进行交互了。

服务端

网络服务器

静态网络服务器 static web server [2]

由计算机(硬件)和 HTTP 服务器(软件)组成。

动态网络服务器 dynamic web server

由静态的网络服务器加上额外的软件组成,最普遍的是一个应用服务器和一个数据库。称他为“动态”是因为这个应用服务器会通过 HTTP 服务器把托管文件传送到你的浏览器之前会对这些托管文件进行更新。

托管文件

指由网络服务器存储的关于网站的文件,包括 HTML 文档和它们的相关资源(图片,CSS 样式表,JavaScript 文件,字体以及影像)。


  1. 万维网是如何工作的 - 学习 Web 开发 | MDN (mozilla.org) ↩︎

  2. 什么是网络服务器? - 学习 Web 开发 | MDN (mozilla.org) ↩︎